<template>
	<div class="registry-box">
		<div class="registry">
			<h1 style="margin-bottom: 2rem;">焦作师专新闻系统注册</h1>
			<div>
				<el-row style="margin-bottom: 2rem;">
					<el-input size="mini" v-model="user.userName" :prefix-icon="User" placeholder="请输入用户名" />
				</el-row>
				<el-row style="margin-bottom: 2rem;">
					<el-input size="mini" v-model="user.fullName" :prefix-icon="User" placeholder="请输入姓名" />
				</el-row>
				<el-row style="margin-bottom: 2rem;">
					<el-input size="mini" show-password v-model="user.password" :prefix-icon="Lock"
						placeholder="请输入密码" />
				</el-row>
				<el-row style="margin-bottom: 2rem;">
					<el-input size="mini" show-password v-model="repassword" :prefix-icon="Lock" placeholder="再次输入密码" />
				</el-row>


			</div>
			<div>
				<el-button size="mini" @click="registry()">注册</el-button>
				<el-button size="mini">取消</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	//引入图标
	import {
		User,
		Lock
	} from '@element-plus/icons-vue'
	//引入axios
	import axios from 'axios'
	//配置axios基路径
	axios.defaults.baseURL = '/api'
	//引入store对象
	import {
		store
	} from '../../store.js'
	//引入消息框
	import {
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				user: {
					userName: '',
					password: '',
					fullName: ''
				},
				store,
				repassword: ''
			}
		},
		setup() {
			return {
				User,
				Lock
			}
		},
		methods: {
			//注册按钮点击事件
			registry() {
				if (this.user.password != this.repassword) {
					ElMessage.error('两次密码不一致！')
				} else {
					//访问后台注册接口
					axios.post('/user',this.user).then(response => {
						//console.log(response)
						if (response.data) {
							ElMessage({
								message: '恭喜，注册成功！',
								type: 'success',
							})
							//去登录页
							this.$router.push('/login')
						}else{
							ElMessage.error('注册失败！')
						}

					})
				}


			}
		}
	}
</script>

<style>
	.registry-box {
		height: 100%;
		background-color: #00374b;
		position: relative;
	}

	.registry {
		width: 15%;
		position: absolute;
		top: 20%;
		left: 60%;
		color: white;
		text-align: center;
	}
</style>